.a {
    color: red;
}

/*类选择器*/
.b {
    color: blue;
    width: 150px;
}

/*元素选择器*/
/*div {*/
/*    background-color: gray;*/
/*}*/

/*元素选择器优先级大于属性选择器*/
/*属性选择器*/
div[bb=b] {
    background-color: yellow;
}

/*id选择器，优先级大于类选择器 */
#ee {
    color: green;
    background-color: red;
    width: 200px;
    height: 100px;
}

/*通配符*/
/*可视页面宽度
浏览器宽度
*/
* {
    margin: 0;
    /*background-color: aqua;*/
}

body {


    /*外边距*/
    margin: 0;
    /*margin-top: 0px;*/
    /*margin-left: 0px;*/
    /*margin-right: 0px;*/
    /*margin-bottom: 0px;*/


}

.a2 {
    background-color: blue;
    margin: 20px;
    border: 10px solid red;
    padding: 30px;

}

body > div:nth-child(4) {
    color: #888819;
    /*a 表示透明度 0-1之间*/
    background-color: rgba(1, 1, 1, 0.1);
}

/*单行溢出*/
.single-over {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*多行溢出*/
.many-over {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.test {
    width: 200px;
}

.aaa {
    border: 1px solid red;
    width: 20px;
    height: 100px;
}

.bbb {
    border: 1px solid blue;
    width: 50px;
    height: 50px;
    font-size: 50px;
}

.ccc {
    border: 1px solid blueviolet;
    width: 90px;
    height: 70px;
}

.a {
    display: flex;
    /*flex-direction: row-reverse;*/
    /*flex-direction: column-reverse;*/
    /*flex-wrap: nowrap;*/
    /*justify-content: flex-end;*/
    /*justify-content: space-around;*/
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    align-items: baseline;
}
.a >div{
    margin-right: 50px;

}